<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" height="500" width="500" style="border: 1px solid red;">
			
		</canvas>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("canvas");
		if(canvas.getContext){
			var context = canvas.getContext("2d");
			context.beginPath();
			context.moveTo(50,50);//起始点
			context.fillStyle = "red";
			context.fillRect(50,50,2,2);
			context.lineTo(100,50);//创建水平线
			context.arcTo(150,50,150,100,50);//弧的开始x，弧的开始y，弧的结束x，弧的结束y，半径
			context.stroke();
			
		}
		
	</script>
</html>
